<template>
  <view class="product-search">
    <!-- 搜索输入框 -->
    <view class="search-input">
      <uni-search-bar 
        v-model="keyword" 
        placeholder="搜索商品名称或描述"
        @confirm="handleSearch"
        @clear="handleClear"
        :focus="autoFocus"
        :show-action="true"
        action-text="搜索"
        @action="handleSearch"
        bg-color="#f5f5f5"
      />
    </view>

    <!-- 搜索历史 -->
    <view v-if="showHistory && searchHistory.length > 0" class="search-history">
      <view class="history-header">
        <text class="history-title">搜索历史</text>
        <text class="clear-history" @click="clearHistory">清空</text>
      </view>
      <view class="history-list">
        <view 
          v-for="(item, index) in searchHistory" 
          :key="index"
          class="history-item"
          @click="selectHistory(item)"
        >
          {{ item }}
        </view>
      </view>
    </view>

    <!-- 热门搜索 -->
    <view v-if="showHotSearch && hotSearches.length > 0" class="hot-search">
      <view class="hot-header">
        <text class="hot-title">热门搜索</text>
      </view>
      <view class="hot-list">
        <view 
          v-for="(item, index) in hotSearches" 
          :key="index"
          class="hot-item"
          @click="selectHotSearch(item)"
        >
          {{ item }}
        </view>
      </view>
    </view>

    <!-- 搜索建议 -->
    <view v-if="showSuggestions && suggestions.length > 0" class="search-suggestions">
      <view 
        v-for="(item, index) in suggestions" 
        :key="index"
        class="suggestion-item"
        @click="selectSuggestion(item)"
      >
        <text class="suggestion-text">{{ item }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'ProductSearch',
  props: {
    autoFocus: {
      type: Boolean,
      default: false
    },
    showHistory: {
      type: Boolean,
      default: true
    },
    showHotSearch: {
      type: Boolean,
      default: true
    }
  },
  
  data() {
    return {
      keyword: '',
      searchHistory: [],
      hotSearches: ['黑白打印', '彩色打印', 'A4复印', '装订服务'],
      suggestions: [],
      showSuggestions: false
    }
  },
  
  watch: {
    keyword(newVal) {
      if (newVal.trim()) {
        this.getSuggestions(newVal)
      } else {
        this.showSuggestions = false
      }
    }
  },
  
  mounted() {
    this.loadSearchHistory()
  },
  
  methods: {
    // 处理搜索
    handleSearch() {
      const searchKeyword = this.keyword.trim()
      if (!searchKeyword) return
      
      this.addToHistory(searchKeyword)
      this.showSuggestions = false
      
      this.$emit('search', searchKeyword)
    },
    
    // 清空搜索
    handleClear() {
      this.keyword = ''
      this.showSuggestions = false
      this.$emit('clear')
    },
    
    // 选择历史记录
    selectHistory(item) {
      this.keyword = item
      this.handleSearch()
    },
    
    // 选择热门搜索
    selectHotSearch(item) {
      this.keyword = item
      this.handleSearch()
    },
    
    // 选择搜索建议
    selectSuggestion(item) {
      this.keyword = item
      this.handleSearch()
    },
    
    // 添加到搜索历史
    addToHistory(keyword) {
      // 移除重复项
      const index = this.searchHistory.indexOf(keyword)
      if (index > -1) {
        this.searchHistory.splice(index, 1)
      }
      
      // 添加到开头
      this.searchHistory.unshift(keyword)
      
      // 限制历史记录数量
      if (this.searchHistory.length > 10) {
        this.searchHistory = this.searchHistory.slice(0, 10)
      }
      
      this.saveSearchHistory()
    },
    
    // 清空搜索历史
    clearHistory() {
      uni.showModal({
        title: '提示',
        content: '确定要清空搜索历史吗？',
        success: (res) => {
          if (res.confirm) {
            this.searchHistory = []
            this.saveSearchHistory()
          }
        }
      })
    },
    
    // 获取搜索建议
    getSuggestions(keyword) {
      // 这里可以调用API获取搜索建议
      // 暂时使用本地模拟数据
      const mockSuggestions = [
        'A4黑白打印',
        'A4彩色打印',
        'A3黑白打印',
        'A3彩色打印',
        '文档装订',
        '螺旋装订'
      ]
      
      this.suggestions = mockSuggestions.filter(item => 
        item.toLowerCase().includes(keyword.toLowerCase())
      ).slice(0, 5)
      
      this.showSuggestions = this.suggestions.length > 0
    },
    
    // 加载搜索历史
    loadSearchHistory() {
      try {
        const history = uni.getStorageSync('product_search_history')
        if (history) {
          this.searchHistory = JSON.parse(history)
        }
      } catch (error) {
        console.error('加载搜索历史失败:', error)
      }
    },
    
    // 保存搜索历史
    saveSearchHistory() {
      try {
        uni.setStorageSync('product_search_history', JSON.stringify(this.searchHistory))
      } catch (error) {
        console.error('保存搜索历史失败:', error)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.product-search {
  background-color: #fff;
}

.search-input {
  padding: 20rpx;
}

.search-history,
.hot-search {
  padding: 20rpx 30rpx;
  border-top: 1rpx solid #f0f0f0;
}

.history-header,
.hot-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.history-title,
.hot-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.clear-history {
  font-size: 24rpx;
  color: #999;
}

.history-list,
.hot-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}

.history-item,
.hot-item {
  padding: 12rpx 20rpx;
  background-color: #f5f5f5;
  border-radius: 20rpx;
  font-size: 26rpx;
  color: #666;
}

.search-suggestions {
  border-top: 1rpx solid #f0f0f0;
}

.suggestion-item {
  padding: 24rpx 30rpx;
  border-bottom: 1rpx solid #f8f8f8;
  
  &:last-child {
    border-bottom: none;
  }
}

.suggestion-text {
  font-size: 28rpx;
  color: #333;
}
</style>